<template>
	<view class="content">
		<view class="top-bar">
			<navigator :url="'../userhome/userhome?id='+uid" class="top-bar-left">
				<image :src="imgurl">
			</navigator>
			<view class="top-bar-center">
				<text>ZCHAT</text>
			</view>
			<view class="top-bar-right">
				<view class="search iconfont" @tap="toSearch">&#xe633;</view>
				<view class="add iconfont" @tap="toUserDetail">&#xe615;</view>
			</view>
		</view>

		<view class="main">
			<view class="refresh">
				<text>下拉刷新</text>
			</view>
			<view class="friends" @tap="toRequset">
				<view class="friend-list">
					<view class="friend-list-l">
						<text class="tip" v-if="requestCount>0">{{requestCount}}</text>
						<view class="iconfont" style="width: 96rpx; height: 96rpx; font-size: 96rpx;">&#xe64c;</view>
					</view>
					<view class="friend-list-r">
						<view class="friend-list-r-t">
							<view class="name">好友申请</view>
							<view class="time">{{changeTime(requestTime)}}</view>
						</view>
						<view class="friend-list-r-b">点击查看具体申请信息</view>
					</view>
				</view>
			</view>
			<view class="friends">
				<view class="friend-list" v-for="(item,index) in friends" :key="item.id" @tap="toChatroom(item.id)">
					<view class="friend-list-l">
						<text class="tip" v-if="item.tip>0">{{item.tip}}</text>
						<image :src="item.imgurl"></image>
					</view>
					<view class="friend-list-r">
						<view class="friend-list-r-t">
							<view class="name">{{item.name}}</view>
							<view class="time">{{changeTime(item.lastTime)}}</view>
						</view>
						<view class="friend-list-r-b">{{item.msg}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import datas from '../../commons/js/data.js'
	import tools from '../../commons/js/tools.js'
	export default {
		data() {
			return {
				storageData: '',
				friends: [],
				uid: '', //用户id
				imgurl: '', //用户头像
				//好友申请数
				requestCount: 0,
				//最后申请时间
				requestTime: ''
			}
		},
		onLoad() {
			this.getStorages()
			this.friendRequest()
			//this.getFriends()
			this.receiveSocketMsg()
		},
		onPullDownRefresh() {
			this.friendRequest()
			this.getFriends()
			this.joinSocket(this.uid)
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onShow() {
			try {
				const value = uni.getStorageSync('user')
				if (value) {
					this.storageData = value
				}
			} catch (e) {}
			if (!this.storageData.token) {
				uni.navigateTo({
					url: '../login/login'
				})
			} else {
				this.getStorages()
			}
			this.getFriends()
			this.joinSocket(this.uid)
		},
		methods: {
			changeTime: function(d) {
				return tools.dateTime(d)
			},
			friendRequest() {
				uni.request({
					url: this.baseURL + '/index/getfriend',
					data: {
						uid: this.uid,
						state: 1
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let res = data.data.result
							this.requestCount = res.length
							if (res.length > 0) {
								this.requestTime = res[0].lastTime
								for (let i = 0; i < res.length; i++) {
									if (this.requestTime < res[i].lastTime) {
										this.requestTime = res[i].lastTime
									}
								}
							}

						} else if (status === 500) {

						}
					}
				})
			},
			getFriends: function() {
				uni.request({
					url: this.baseURL + '/index/getfriend',
					data: {
						uid: this.uid,
						state: 0
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							let res = data.data.result
							if (res.length > 0) {
								for (let i = 0; i < res.length; i++) {
									res[i].imgurl = this.baseURL + res[i].imgurl
									this.getLastMsg(res, i)
									this.getUnreadMsg(res, i)
								}
							}
							this.friends = res
							this.friends = tools.sortall(this.friends, 'lastTime', 0)
						} else if (status === 500) {

						}
					}
				})
			},
			//获得最后消息
			getLastMsg(arr, i) {
				uni.request({
					url: this.baseURL + '/index/getlastmsg',
					data: {
						uid: this.uid,
						fid: arr[i].id,
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let resu = data.data.result
							if (resu.type == 1) {
								resu.message = '[图片]'
							} else if (resu.type == 2) {
								resu.message = '[语音]'
							} else if (resu.type == 3) {
								resu.message = '[位置]'
							}
							let e = arr[i]
							e.msg = resu.message
							arr.splice(i, 1, e)
						} else if (status === 500) {

						}
					}
				})
			},
			//获得未读消息数
			getUnreadMsg(arr, i) {
				uni.request({
					url: this.baseURL + '/index/unreadmsg',
					data: {
						uid: this.uid,
						fid: arr[i].id,
					},
					method: 'POST',
					success: (data) => {
						let status = data.data.status
						if (status === 200) {
							//成功
							let res = data.data.result
							let e = arr[i]
							e.tip = res
							arr.splice(i, 1, e)
						} else if (status === 500) {}
					}
				})
			},
			//socket 模块
			//用户注册socket
			joinSocket(uid) {
				this.socket.emit('login', uid)
			},
			//socket聊天数据接收
			receiveSocketMsg() {
				this.socket.on('msg', (msg, fromid) => {
					let nmsg = ''
					if (msg.type == 0) {
						nmsg = msg.msg
					} else if (msg.type == 1) {
						nmsg = '[图片]'
					} else if (msg.type == 2) {
						nmsg = '[语音]'
					} else if (msg.type == 3) {
						nmsg = '[位置]'
					}

					for (let i = 0; i < this.friends.length; i++) {
						if (this.friends[i].id === fromid) {
							let e = this.friends[i]
							e.lastTime = new Date()
							e.msg = nmsg
							e.tip++
							//删除原来的数据项
							this.friends.splice(i, 1)
							//新消息插入到最顶部
							this.friends.unshift(e)
						}
					}
				})
			},
			//跳转到搜索页面
			toSearch: function() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			//获取本地缓存
			getStorages: function() {
				try {
					const value = uni.getStorageSync('user');
					if (value) {
						this.uid = value.id
						this.imgurl = this.baseURL + value.imgurl
					}
				} catch (e) {
					//没有缓存跳转到登录页面
					uni.navigateTo({
						url: '../index/index'
					})
				}
			},
			//去好友请求页面
			toRequset() {
				uni.navigateTo({
					url: '../friendrequest/friendrequest'
				})
			},
			//去聊天页面
			toChatroom(id) {
				uni.navigateTo({
					url: '../chatroom/chatroom?id=' + id
				})
			},
			//跳转到用户详情页面
			toUserDetail() {
				uni.navigateTo({
					url: '../userdetail/userdetail?id=' + this.uid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../commons/css/style.scss';

	.content {
		padding-top: var(--status-bar-height);
	}

	.top-bar {
		border-bottom: 1px solid $uni-border-color;

		.top-bar-center {
			position: absolute;
			margin-left: 50%;
			transform: translate(-50%, 0);
		}
	}

	.main {
		padding: 90rpx 8rpx 0;
		width: 100%;
	}

	.friend-list {
		height: 96rpx;
		padding: 16rpx 0 16rpx 30rpx;
		display: flex;

		&:active {
			background-color: $uni-bg-color-grey;
		}

		.friend-list-l {
			position: relative;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: $uni-border-radius-base;
				background-color: $uni-bg-color;
			}

			.tip {
				z-index: 9;
				position: absolute;
				top: 0;
				top: -6rpx;
				left: 68rpx;
				min-width: 20rpx;
				height: 36rpx;
				padding: 0 8rpx;
				border-radius: 18px;
				background: red;
				font-size: $uni-font-size-sm;
				text-align: center;
				color: $uni-text-color-inverse;
				line-height: 36rpx;
			}
		}

		.friend-list-r {
			padding-left: 35rpx;

			.friend-list-r-t {
				display: flex;
				width: 540rpx;
				justify-content: space-between;

				.name {
					font-size: 36rpx;
					font-weight: 400;
					color: $uni-text-color;
					line-height: 50rpx;
				}

				.time {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-disable;
					line-height: 50rpx;
				}
			}

			.friend-list-r-b {
				width: 540rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				line-height: 40rpx;
			}
		}
	}

	.refresh {
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		padding-right: 8rpx;

		text {
			font-size: 20rpx;
			color: #c7c7d8;
		}
	}
</style>
